<template>
    <div>
        <van-card
            class="shopItem"
            :title="item.name"
            :thumb="item.headImg"
            v-for="item in $route.path == '/search' ? search(keywords) : list" 
            :key="item.id" 
            @click="toInfo(item.id)">
            <div slot="tags" class="tags">
                <div class="tagTop">
                    <van-rate
                        v-model="item.rating_count"
                        allow-half
                        void-color="#eee"
                        readonly
                    />
                    <span>{{item.rating_count}}</span>
                    <span>月售{{item.recent_order_num}}单</span>
                </div>
                <div class="tagBottom">
                    <div>
                        <span>¥{{item.float_minimum_order_amount}}起送</span> |
                        <span>配送费¥{{item.piecewise_agent_fee}}</span>
                    </div>
                    <div>
                        <span>{{item.distance}}m</span> |
                        <span>{{item.order_lead_time}}</span>
                    </div>
                </div>
            </div>
        </van-card>
    </div>
</template>

<script>
import { apiGetShopList, apiGetTopSelling, apiGetSDistance, apiGetFilter } from '../../api/index'
export default {
    props: ['keywords'],
    data() {
        return {
            list: []
        }
    },
    created() {
        // 获取商品列表
        apiGetShopList()
        .then(res => {
            this.list = res.data.data.list
        })
        .catch(err => {
            console.log(err);
        })
    },
    methods: {
        // 获取销量最高的商品列表
        getTopSelling() {
            apiGetTopSelling()
            .then(res => {
                this.list = res.data.data.list
            })
            .catch(err => {
                console.log(err);
            })
        },
        // 获取距离最近的商品列表
        getGetSDistance() {
            apiGetSDistance()
            .then(res => {
                this.list = res.data.data.list
            })
            .catch(err => {
                console.log(err);
            })
        },
        // 跳转到商品详情
        toInfo(id) {
            this.$router.push({path: `/shopInfo/${id}`})
        },
        // 筛选搜索
        search(keywords) {
            return this.list.filter(item => {
                if (item.name.includes(this.keywords)) {
                    return item;
                }
            });
        }
    }
}
</script>

<style lang="less">
    .shopItem {
        .van-card__content {
            display: flex;
            flex-direction: column;
            .van-card__title {
                margin-top: 1vh;
                font-weight: 700;
                font-size: 15px;
            }
            .tags {
                color: #666;
                .tagTop {
                    margin-top: 1vh;
                    display: flex;
                    .van-rate__item {
                        i {
                            font-size: 1vw!important;
                        }
                    }
                    span {
                        margin-right: 2vw;
                    }
                }
                .tagBottom {
                    margin-top: 1vh;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
</style>